<template>
  <a-card :bordered="false">
    <a-steps
      class="steps"
      :current="current"
    >
      <a-step title="反馈信息" />
      <a-step title="反馈内容" />
      <a-step title="结果" />
    </a-steps>
    <div class="content">
      <step1
        v-if="current === 0"
        @nextStep="nextStep"
      ></step1>
      <step2
        v-if="current === 1"
        @nextStep="nextStep"
        @prevStep="prevStep"
        @submit='submit'
      ></step2>
      <step3
        v-if="current === 2"
        @prevStep="prevStep"
        @finish="finish"
      ></step3>
    </div>
  </a-card>
</template>

<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
import {sendFeedback} from '@/services/feedback'
export default {
  name: 'StepForm',
  components: { Step1, Step2, Step3 },
  data() {
    return {
      current: 0,
      feedbackObj: {}
    }
  },
  computed: {
  },
  methods: {
    nextStep(selected) {
      if (this.current < 2) {
        this.current += 1
        this.feedbackObj.status = selected
      }
    },
    prevStep() {
      if (this.current > 0) {
        this.current -= 1
      }
    },
    submit(desc) {
      this.feedbackObj.desc = desc
      sendFeedback(this.feedbackObj).then(res => {
        this.$message.success(res.msg)
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    finish() {
      this.current = 0;
       this.feedbackObj={}
    }
  }
}
</script>

<style lang="less" scoped>
.steps {
  max-width: 950px;
  margin: 16px auto;
}
</style>
